<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
            文档(document):一个页面就是一个文档,
            元素(element) : 页面中所有标签都是元素
            节点(node):页面中所有内容都是节点(标签 属性 文本 注释等)

            节点类型:元素节点,属性节点,文本节点.一般我们都是操作元素节点.
            节点是对象:有名字,类型,节点值
            元素节点的值  null
            文本节点的值是文本.
        */

    </script>


<ul>123
     <li>风雨同路</li>11
     <li>逃学威龙</li>
     <li>破坏之王</li>333
     <li>zxc</li>
</ul>

<script>

let ul = document.querySelector('ul');
console.dir(ul);
//获取所有的子节点
  console.log(ul.childNodes);

  //2.节点的名字,类型,值
  console.log(ul.childNodes[0].nodeName);
  console.log(ul.childNodes[1].nodeName);
  console.log(ul.childNodes[0].nodeName);
  console.log(ul.childNodes[1].nodeName);
  console.log(ul.childNodes[0].nodeName);
  console.log(ul.childNodes[1].nodeName);
</script>


</body>
</html>